<template>
  <div>
    <el-row type="flex" justify="space-between" align="center">
        <span class="title-tips">说明：目前支持学科和关键字条件筛选</span>
        <el-button size="small" type="success" @click="$router.push('/questions/new')">
          <i class="el-icon-edit"></i>新增试题</el-button>
    </el-row>
    <el-form ref="questionRef" :model="questionForm" label-width="80px">
      <el-row type="flex" justify="center" style="margin: 5px">
        <el-col>
          <el-form-item label="学科">
            <el-select v-model="questionForm.subjectID" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="item in subjectList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="二级目录">
            <el-select v-model="questionForm.catalogID" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="item in twoLevelDirectory"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="标签">
            <el-select v-model="questionForm.tags" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="item in tagsList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="关键字">
            <el-input v-model="questionForm.keyword" placeholder="请根据提干搜索" style="width: 100%"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center" style="margin: 0">
        <el-col>
          <el-form-item label="试题类型">
            <el-select v-model="questionForm.questionType" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="item in testHireMap"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="难度">
            <el-select v-model="questionForm.difficulty" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="item in difficultyHireMap"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="方向">
            <el-select v-model="questionForm.direction" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="(item, index) in directiveList"
                :key="index"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="录入人">
            <el-select v-model="questionForm.creatorID" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="item in creatorList"
                :key="item.id"
                :label="item.username"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center" style="margin-bottom: 0;padding-bottom: 0">
        <el-col>
          <el-form-item label="题目备注">
            <el-input v-model="questionForm.remarks"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="企业简称">
            <el-input v-model="questionForm.shortName"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
        <el-form-item label="城市">
          <el-row type="flex">
            <el-select v-model="questionForm.province" placeholder="请选择" style="width: 100%;margin-right:10px;">
              <el-option
                v-for="(item, index) in provinces"
                :key="index"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
            <el-select v-model="questionForm.city" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="(item, index) in citys"
                :key="index"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-row>
        </el-form-item>
        </el-col>
        <el-col>
          <el-form-item style="display: flex; justify-content: right;">
            <el-button @click="resetForm" size="small">清除</el-button>
            <el-button type="primary" @click="lookList" size="small">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { list } from '@/api/base/users'
import { simple as getTagsSimple } from '@/api/hmmm/tags'
import { simple as getSecondSimple } from '@/api/hmmm/directorys'
import { provinces, citys } from '@/api/hmmm/citys'
export default {
  data () {
    return {
      subjectList: [],
      options: [],
      value1: [],
      value2: [],
      value3: [],
      value4: [],
      questionForm: {
        // page: '',
        // pagesize: '',
        // subjectID: '',
        // catalogID: '',
        // keyword: '',
        // tags: '',
        // question: '',
        // questionType: '',
        // difficulty: '',
        // direction: '',
        // creatorID: '',
        // remarks: '',
        // // enterpriseID: '',
        // province: '',
        // city: '',
        // shortName: '',
        // // tags: ''
      },
      testHireMap: [
        { value: 1, label: '单选' },
        { value: 2, label: '多选' },
        { value: 3, label: '简答' }
      ],
      difficultyHireMap: [
        { value: 1, label: '简单' },
        { value: 2, label: '一般' },
        { value: 3, label: '困难' }
      ],
      directiveList: ['o2o', '外包服务', '企业服务', '互联网金融', '企业咨询', '互联网', '电子商务', '其他'],
      creatorList: [],
      twoLevelDirectory: [],
      tagsList: [],
      provinces: provinces(),
      citys: ''
    }
  },
  created () {
    this.getUsersList()
    this.getQuestion()
  },
  watch: {
    'questionForm.subjectID' () {
      if (this.questionForm.catalogID) this.questionForm.catalogID = ''
      if (this.questionForm.tags) this.questionForm.tags = ''
      this.getQuestionSecond()
      this.getQuestionTags()
    },
    'questionForm.province' () {
      if (this.questionForm.city) this.questionForm.city = ''
      this.citys = citys(this.questionForm.province)
    }
  },
  methods: {
    async getUsersList () {
      // const res = await list({
      //   page: 1,
      //   pagesize: 500
      // })
      const res = await simple()
      // console.log(res)
      this.subjectList = res.data
      // console.log('list', this.subjectList)
    },
    async getQuestionSecond () {
      // const res = await secondList({
      //   page: this.questionForm.page,
      //   pagesize: this.questionForm.pagesize,
      //   subjectName: this.subjectList.filter(item => item.value === this.questionForm.subjectID)[0].label
      // })
      const res = await getSecondSimple({
        subjectID: this.questionForm.subjectID
      })
      // console.log(res)
      this.twoLevelDirectory = res.data
      // this.tags = res.data.items[0].tags
    },
    async getQuestionTags () {
      // const res = await tagsList({
      //   page: this.questionForm.page,
      //   pagesize: this.questionForm.pagesize,
      //   subjectID: this.questionForm.subjectID
      // })
      const res = await getTagsSimple({
        subjectID: this.questionForm.subjectID
      })
      // console.log(res)
      this.tagsList = res.data
      // this.tagsList.push({tags: this.tags})
    },
    async getQuestion () {
      const res = await list({
        page: this.questionForm.page,
        pagesize: this.questionForm.pagesize,
        keyword: this.questionForm.keyword
      })
      // console.log(res)
      this.creatorList = res.data.list
    },
    resetForm () {
      // this.$refs.questionRef.resetFields()
      this.questionForm = {}
    },
    async lookList () {
      this.$emit('check-question', this.questionForm)
    }
  }
}
</script>

<style lang="scss" scoped>
.title-tips {
  color: #f7ced5;
  font-size: 12px;
}
</style>
